<template>
  <div class="balance-main">
    <div class="top">
      <div class="top-left">
        <div class="dot-common"></div>
        <span class="text">我的优惠券</span>
      </div>
      <div class="top-right">
        <router-link to="/coupon/index" class="button thumb"
          >立即领取</router-link
        >
        <!-- <div class="button thumb">立即充值</div> -->
      </div>
    </div>
    <div class="top-second">
      <div class="top-second-left">17</div>
    </div>

    <div class="content">
      <Balance
        :showTitle="true"
        :show-date="false"
        :show-search="false"
        :column="[{ title: '全部' }, { title: '已使用' }, { title: '未使用' }]"
        title="优惠券详情"
        :searchPlaceholder="`搜索流水号和订单号`"
      >
        <template #header>
          <div class="header">
            <div class="part">未使用：<span class="value">8</span></div>
            <div class="part">已使用：<span class="value">9</span></div>
          </div>
        </template>
      </Balance>

      <div class="table-container">
        <Table
          :topCss="{
            background: '#f5f8fe',
            height: '.3042rem',
            fontSize: '.0893rem',
          }"
          :tdCss="{
            fontSize: '.07rem',
            padding: '.04rem',
          }"
          :lineCss="{
            height: `.2188rem`,
            background: '#f5f8fe',
          }"
          :borderSpacing="`0 .0729rem`"
          headerFamily="PuHuiMedium"
          :dataSource="coupon"
          :headerFontSize="`400`"
          :column="column"
        >
          <template #status="{ row }">
            <span class="text">{{ row.status === 1 ? `未使用` : `已使用` }}</span>
          </template>

          <template #range="{ row }">
            <span class="text">{{ row.factory_id === 0 ? `全平台厂家` : row.factory_name }}</span>
          </template>
          <template #factory_id="{ row }">
            <span class="text">{{ row.factory_id === 0 ? `平台优惠券` : `工厂优惠卷` }}</span>
          </template>

          <template #discounts="{ row }">
            <span class="text">￥{{ twoFixed(row.discounts) }}</span>
          </template>
        </Table>
      </div>
    </div>
  </div>
</template>
<script setup lang="ts" name="">
import { ref } from "vue";
import { twoFixed } from "@/utils/util";
import Balance from "@/components/Balance/index.vue";
import Table, { Column } from "@/components/Table";
import coupon from "@/json/couponList.json";

const column = ref<Array<Column>>([
  { title: "使用范围", dataKey: "range", width: 200, align: "center" , slotName:"range"},
  { title: "类型", dataKey: "factory_id", width: 100, align: "center" , slotName:"factory_id"},
  { title: "规则描述", dataKey: "describe", align: "center", width: 400 },
  {
    title: "状态",
    dataKey: "status",
    width: 180,
    align: "center",
    slotName: "status",
  },
  {
    title: "优惠金额",
    dataKey: "discounts",
    width: 180,
    align: "center",
    slotName: "discounts",
  },
]);
</script>
<style scoped lang="scss">
@media screen and (min-width: $pc-min-width) {
  @import "./pc.scss";
}
</style>
